<template>
  
  <view class="uni-header">
    <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
  </view>

  <view class="uni-container">
    <uni-forms :rules="rules" label-align="center" class="uni-forms" ref="form" :modelValue="formData" validateTrigger="bind">
      <uni-forms-item  name="groupId" label="配置分组" required>
        <uni-data-select v-model="formData.groupId" :localdata="groupList" :clear="false" />
      </uni-forms-item>
      <uni-forms-item name="title" label="配置标题" required>
        <uni-easyinput placeholder="请输入配置标题" v-model="formData.title" trim="both"   :clearable="false"/>
      </uni-forms-item>
      <uni-forms-item name="name" label="配置名称" required>
        <uni-easyinput placeholder="支持字母、下划线，必需字母开头" v-model="formData.name" trim="both"  :clearable="false" />
        <view class="uni-form-item-tips">
          示例：site_name，调用方法：<text style="color:red;">config('site_name')</text>
        </view>
      </uni-forms-item>
      <uni-forms-item name="type" label="配置类型" required>
        <uni-data-select v-model="formData.type" :localdata="typeList" :clear="false" />
      </uni-forms-item>
      <uni-forms-item name="default" label="默认值" required>
        <uni-easyinput type="textarea" v-model="formData.default" placeholder="请输入内容" />
        <view class="uni-form-item-tips">
          配置类型为数组时请按如下格式填写，其他类型随意：<br>
          键值:键名<br>
          键值:键名<br>
          配置类型为checkbox时，多个选项值请用","分割
        </view>
      </uni-forms-item>
      <uni-forms-item name="options" label="配置选项">
        <uni-easyinput type="textarea" v-model="formData.options" placeholder="请输入内容" />

        <view class="uni-form-item-tips">
          仅适用于配置类型为单选按钮、多选框、下拉框、开关。<br>
          参考格式如下：<br>
          1:北京<br>
          2:上海<br>
          3:广州<br>
          4:深圳
        </view>
      </uni-forms-item>

      <uni-forms-item name="tips" label="配置提示">
        <uni-easyinput type="textarea" v-model="formData.tips" placeholder="请输入内容" />
        <view class="uni-form-item-tips">
          关于此配置的提示信息或使用说明，支持HTML
        </view>
      </uni-forms-item>

      <uni-forms-item class="flex-center-x" name="status" label="配置状态" required>
        <uni-data-checkbox v-model="formData.status" :localdata="statusList" />
      </uni-forms-item>
      
      <uni-forms-item name="serial" label="排序号" required>
        <uni-easyinput type="number" placeholder="请输入排序号" v-model="formData.serial" trim="both" :clearable="false" />
      </uni-forms-item>
      
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;"
          @click="submitForm">{{$t('common.button.submit')}}</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
  <fix-window />
</template>

<script>
  import {
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        rules: {
          title: {
            rules: [{
              required: true,
              errorMessage: "请输入标题"
            },{
              minLength: 2,
              maxLength: 100,
              errorMessage: '标题长度在 {minLength} 到 {maxLength} 个字符',
            }]
          },
          name: {
            rules: [{
                required: true,
                errorMessage: "请输入名称"
              },
              {
                minLength: 2,
                maxLength: 50,
                errorMessage: '名称长度在 {minLength} 到 {maxLength} 个字符',
              }
            ]
          },
          default: {
            rules: [{
                required: true,
                errorMessage: "请输入默认值"
              },
              {
                minLength: 1,
                maxLength: 100,
                errorMessage: '默认长度在 {minLength} 到 {maxLength} 个字符',
              }
            ]
          },
        },
        formData: {
        },
        groupList: [],
        typeList: [],
        statusList: []
      }
    },
    onLoad(params) {
      this.formData.groupId = params.groupId;
      this.buildPage(params)
    },
    methods: {
      ...mapActions({
        getConfigForm: "config/form",
        saveConfig: "config/save",
      }),
      async buildPage(params = {}) {
        uni.showLoading({
          mask: true,
        })

        let data = await this.getConfigForm(params);

        this.groupList = [];
        data.groupList.forEach(item => {
          this.groupList.push({
            value: item.id,
            text: item.title + "(" + item.name + ")"
          });
        });


        this.typeList = [];
        Object.keys(data.typeList).forEach(key => {
          this.typeList.push({
            text: data.typeList[key],
            value: key
          })
        })

        this.statusList = [];
        Object.keys(data.statusList).forEach(key => {
          this.statusList.push({
            text: data.statusList[key],
            value: parseInt(key)
          })
        })

        let groupId = this.formData.groupId;
        this.formData = data.entity;
        if(groupId){
          this.formData.groupId = groupId;
        }

        uni.hideLoading()
      },
      submitForm() {
        uni.showLoading({
          mask: true
        })
        this.$refs.form.validate().then(data => {
          data.id = this.formData.id || 0;

          this.saveConfig(data).then(res => {
            uni.showModal({
              title: "提示",
              content: "操作成功",
              confirmText: "继续添加",
              cancelText: "返回",
              success: (e) => {
                if (e.cancel) {
                  this.back()
                } else {
                  this.buildPage()
                }
              }
            })
          }).finally(_ => {
            uni.hideLoading()
          })
        }).catch(() => {
          uni.hideLoading()
        })
      },
    }
  }
</script>